<template>
  <div class="app-container">

    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="hotelChnName">
        <el-input v-model="list.filter.hotelChnName" placeholder="酒店名称" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="hotelStar">
        <KiSelect v-model="list.filter.hotelStar" :options="dict.xc_hotel_star" placeholder="星级"/>
      </el-form-item>
      <el-form-item prop="bookable">
        <!-- <KiSelect v-model="list.filter.bookable" :options="['否', '是']" placeholder="是否可预订"/> -->
        <Status 
          v-model="list.filter.bookable" 
          :statusList="[
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ]" 
          placeholder="是否可预订" 
        />
      </el-form-item>
      <el-button @click="()=>{$refs.listFilterRef.resetFields()}">重置</el-button>
    </el-form>


    <div class="table-operation">
      <span>
        <!-- <AuthButton @click="exportList" name="导出" :loading="loading"/> -->
        <ExportExcel
          url="/sot-admin-api/hotel/ctripHotel/export"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index"/>
      <el-table-column label="酒店名称" prop="hotelChnName"/>
      <el-table-column label="电话" prop="telephone"/>
      <el-table-column label="城市" prop="cityName"/>
      <el-table-column label="行政区" prop="countyName"/>
      <el-table-column label="商圈" prop="businessName"/>
      <el-table-column label="星级" prop="hotelStarName"/>
      <el-table-column label="是否可预订">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.bookable? true : false"
            active-text="是"
            inactive-text="否"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row:{hotelId}}">
          <AuthButton @click="detailsOfHotel(hotelId)" name="详情" circle>
            <i class="el-icon-search"/>
          </AuthButton>
        </template>
      </el-table-column>
    </el-table>

    <DetailsDialog v-if="hotelId" :id="hotelId" @clearHotelId="hotelId = null"/>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import DetailsDialog from './components/DetailsDialog'


export default {
  mixins: [pageMixin],
  components: { DetailsDialog },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/ctripHotel',
    // 标准一码游根据需要去除默认值
    // list: {
    //   filter: {
    //     areaCode: '520000000000'
    //   }
    // }
  }),
  data () {
    return {
      loading: false,
      hotelId: null
    }
  },
  methods: {
    detailsOfHotel(hotelId) {
      this.hotelId = hotelId
    },
    // exportList () {
    //   this.loading = true
    //   this.$download('sot-admin-api/hotel/ctripHotel/export', this.list.filter, { method: 'POST' }).finally(e => {
    //     this.loading = false
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>

</style>

